@{
    ViewData["PageClass"] = "product-page";
}

<!-- End Navbar -->
<div class="page-header page-header-mini">
    <div class="page-header-image" data-parallax="true" style="background-image: url('@Model.ThumbnailUrl');">
    </div>
</div>
<div class="section">
    <div class="container">
        <div class="row">

            <div class="col-md-5">
                <div id="productCarousel" class="carousel slide" data-ride="carousel" data-interval="8000">
                    @if (Model.MediaNavs.Count > 0)
                    {
                        <ol class="carousel-indicators">
                            @if (Model.MediaNavs.Count > 1)
                            {
                                @for (int i = 0; i < Model.MediaNavs.Count; i++)
                                {
                                    <li data-target="#productCarousel" data-slide-to="@i" class="@(i==0?"active":"")"></li>
                                }
                            }
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            @for (int i = 0; i < Model.MediaNavs.Count; i++)
                            {
                                <div class="carousel-item @(i==0?"active":"")">
                                    <img class="d-block img-raised" src="@Model.MediaNavs[i].Image" alt="@Model.MediaNavs[i].Description">
                                </div>

                            }
                        </div>
                        @if (Model.MediaNavs.Count > 1)
                        {
                            <a class="carousel-control-prev" href="#productCarousel" role="button" data-slide="prev">

                                <i class="now-ui-icons arrows-1_minimal-left"></i>

                            </a>
                            <a class="carousel-control-next" href="#productCarousel" role="button" data-slide="next">

                                <i class="now-ui-icons arrows-1_minimal-right"></i>

                            </a>
                        }
                    }
                    else if (Model.ImageUrl != "")
                    {
                        <img class="d-block img-raised" src="@Model.ImageUrl" alt="@Model.Title">
                    }
                </div>

            </div>

            <div class="col-md-6 ml-auto mr-auto">
                <h2 class="title"> @Model.Title </h2>
                @*<h5 class="category">@Model.Title</h5>*@
                <h2 class="main-price">@Model.StrPrice @Model.PriceUnit</h2>
                <div id="accordion" role="tablist" aria-multiselectable="true" class="card-collapse">
                    <div class="card card-plain">
                        <h6 class="card-header" role="tab" id="headingOne">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Description
                                <i class="now-ui-icons arrows-1_minimal-down"></i>
                            </a>
                        </h6>
                        <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                            <div class="card-body">

                                <p>
                                    <fb-send class="hide-on-mb" app-id="'@(SioService.GetConfig<string>("FacebookAppId", ViewBag.culture as string))'"></fb-send>
                                    <fb-share></fb-share>
                                </p>
                                @Html.Raw(Model.Excerpt)
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="section">
            <div class="section-story-overview">
                <div class="row">
                    <div class="col-md-12">
                        @Html.Raw(Model.Content)
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <partial name="../Widgets/_Comments_Facebook.cshtml" />
        </div>
    </div>
</div>
@if (Model.ProductNavs.Count > 0)
{
    <div class="section related-products" data-background-color="black">
        <div class="container">
            <h3 class="title text-center">You may also be interested in:</h3>
            <div class="row">
                @foreach (var item in Model.ProductNavs)
                {
                    var product = item.RelatedProduct;
                    <div class="col-sm-6 col-md-3">
                        <div class="card card-product">
                            <div class="card-image">
                                <a href="@product.DetailsUrl">
                                    s
                                    <img class="img rounded" src="@product.ImageUrl" />
                                </a>
                            </div>
                            <div class="card-body">
                                @*<h6 class="category text-danger">Trending</h6>*@
                                <h4 class="card-title">
                                    <a href="@product.DetailsUrl" class="card-link">@product.Title</a>
                                </h4>
                                <div class="card-description">
                                    @Html.Raw(product.Excerpt)
                                </div>
                                <div class="card-footer">
                                    <div class="price-container">
                                        <span class="price">@product.Price @product.PriceUnit</span>
                                    </div>
                                    @*
                                        <button class="btn btn-neutral btn-icon btn-round pull-right" rel="tooltip" title="" data-placement="left" data-original-title="Add to wishlist">
                                            <i class="now-ui-icons ui-2_favourite-28"></i>
                                        </button>*@
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
}
